<template>
    <div class="content">
        <div class="userInfo">
            <div class="userInfo-left">
                <div class="avatar">
                    <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u2083_disabled.svg"
                        alt="">
                </div>
                <div class="user-region">
                    <div class="user">
                        <p>下午好,</p>
                        <p class="username">{{account}}</p>
                    </div>
                    <el-popover placement="bottom" title="小区简介" width="456" trigger="click"
                        content="【腾讯大厦B座】位于【四川省成都市武侯区桂溪街道腾讯大厦A座】，面积【】平方米，社区住户数量【99】人， ,楼栋【19】栋，共有【77】套房屋， 现有【37】套房屋已经使用。小区 一共发生【1】条布控预警信息，本月发生【0】条布控预警信息，和上月相比承【持平】趋势，是一个信息化智慧小区。">
                        <span slot="reference" class="region">城市花园，隶属于：四川省成都市武侯区桂溪街道和平社区</span>
                    </el-popover>

                </div>
            </div>
            <div class="userInfo-right">
                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                    alt="">
                <div class="userinfo-num">
                    <p>系统工作人员</p>
                    <p class="num num1">6</p>
                </div>
                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                    alt="">
                <div class="userinfo-num">
                    <p>今日访客</p>
                    <p class="num num2">3</p>
                </div>
                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                    alt="">
                <div class="userinfo-num">
                    <p>未处理工单</p>
                    <p class="num num3">247</p>
                </div>
            </div>

        </div>
        <div class="intro">
            <div class="intro-left">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="人房统计" name="first">
                        <div class="first-info">
                            <div class="build-num">
                                <p class="house-number">楼栋数量</p>
                                <p class="number">{{ buildCount }}</p>
                            </div>
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                                alt="">
                            <div class="house-shape">
                                <div class="houses-num">
                                    <p class="house-number">房屋数量</p>
                                    <p class="number">{{roomCount}}</p>
                                </div>
                                <div class="check-in">
                                    <div ref="check" class="check-shape">

                                    </div>
                                    <div class="check-num">
                                        <p>已入住{{moveInCount}}</p>
                                        <p>未入住{{moveCount}}</p>
                                    </div>
                                </div>
                                <div class="house-type">
                                    <div ref="houses" class="houses-shape"></div>
                                    <div class="house-num">
                                        <p>自用{{selfCount}}</p>
                                        <p>租用{{rentCount}}</p>
                                        <p>闲置{{idleCount}}</p>
                                    </div>
                                </div>
                                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                                    alt="">
                                <div class="resident">
                                    <p class="house-number">住户数量</p>
                                    <p class="number">{{householdCount}}</p>
                                </div>
                            </div>
                            <div class="mask-data">截止2022-06-23</div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="设备设施" name="second">
                        <div class="second-info">
                            <div class="facility">
                                <p class="second-info-title">设备设施总数</p>
                                <p class="second-info-num">95</p>
                            </div>
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                                alt="">
                            <div class="facility">
                                <p class="second-info-title">门禁</p>
                                <p class="second-info-num">17</p>
                                <div class="isonline">
                                    <p>在线&nbsp;16</p>
                                    <p>离线&nbsp;1</p>
                                </div>
                            </div>
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                                alt="">
                            <div class="facility">
                                <p class="second-info-title">视频摄像头</p>
                                <p class="second-info-num">26</p>
                                <div class="isonline">
                                    <p>在线&nbsp;26</p>
                                    <p>离线&nbsp;0</p>
                                </div>
                            </div>
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                                alt="">
                            <div class="facility">
                                <p class="second-info-title">停车场道闸</p>
                                <p class="second-info-num">2</p>
                                <div class="isonline">
                                    <p>在线&nbsp;2</p>
                                    <p>离线&nbsp;0</p>
                                </div>
                            </div>
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                                alt="">
                            <div class="facility">
                                <p class="second-info-title">门磁</p>
                                <p class="second-info-num">17</p>
                                <div class="isonline">
                                    <p>在线&nbsp;16</p>
                                    <p>离线&nbsp;1</p>
                                </div>
                            </div>
                            <p class="more">更多</p>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="车位概况" name="third">
                        <div class="third-info">
                            <div class="facility">
                                <p class="second-info-title">停车场</p>
                                <p class="second-info-num">2</p>
                                <div class="isonline">
                                    <p>启用&nbsp;2</p>
                                    <p>停用&nbsp;0</p>
                                </div>
                            </div>
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                                alt="">
                            <div class="facility">
                                <p class="second-info-title">总车位数</p>
                                <p class="second-info-num">200</p>
                                <div class="isonline">
                                    <p>已售&nbsp;16</p>
                                    <p>未售&nbsp;1</p>
                                    <p>租用&nbsp;20</p>
                                </div>
                            </div>
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1612.svg"
                                alt="">
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <div class="backlog">
                    <div class="backlog-title">
                        <div class="backlog-left">
                            <p>待办项目</p>
                        </div>
                        <div class="backlog-right">
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1653.svg"
                                alt="">
                        </div>
                    </div>
                    <div class="swiper">
                        <el-carousel :interval="0" arrow="always">
                            <el-carousel-item>
                                <div class="swiper-items-first">
                                    <div class="swiper-item">
                                        <p class="swiper-title">身份确认</p>
                                        <p class="swiper-num">500</p>
                                        <p class="operation">待确认</p>
                                    </div>
                                    <div class="swiper-item">
                                        <p class="swiper-title">装修报备</p>
                                        <div class="swiper-bottom">
                                            <div class="swiper-left">
                                                <p class="swiper-num">2</p>
                                                <p class="operation">待验收</p>
                                            </div>
                                            <div class="swiper-right">
                                                <p class="swiper-num">3</p>
                                                <p class="operation">待审批</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-item">
                                        <p class="swiper-title">投诉建议</p>
                                        <p class="swiper-num">6</p>
                                        <p class="operation">待回复</p>
                                    </div>
                                    <div class="swiper-item">
                                        <p class="swiper-title">高空抛物</p>
                                        <p class="swiper-num">3</p>
                                        <p class="operation">未处理</p>
                                    </div>
                                </div>
                            </el-carousel-item>
                            <el-carousel-item>
                                <div class="swiper-items-second">
                                    <div class="swiper-item">
                                        <p class="swiper-title">身份确认</p>
                                        <p class="swiper-num1">980000.60&nbsp;<span>已缴</span></p>
                                        <p class="operation">待确认</p>
                                    </div>
                                    <div class="swiper-item">
                                        <p class="swiper-title">装修报备</p>
                                        <div class="swiper-bottom">
                                            <div class="swiper-left">
                                                <p class="swiper-num2">2</p>
                                                <p class="operation">待验收</p>
                                            </div>
                                            <div class="swiper-right">
                                                <p class="swiper-num3">3</p>
                                                <p class="operation">待审批</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-item">
                                        <p class="swiper-title">身份确认</p>
                                        <p class="swiper-num4">500</p>
                                        <p class="operation">待确认</p>
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <div class="navs">
                    <div class="backlog-title">
                        <div class="backlog-left">
                            <p>便捷导航</p>
                        </div>
                        <div class="backlog-right">
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1653.svg"
                                alt="">
                        </div>
                    </div>
                    <ul>
                        <li>
                            <i class="el-icon-office-building"></i>
                            <p>房屋管理</p>
                        </li>
                        <li>
                            <i class="el-icon-user"></i>
                            <p>住户管理</p>
                        </li>
                        <li>
                            <i class="el-icon-bank-card"></i>
                            <p>物业管理费</p>
                        </li>
                        <li>
                            <i class="el-icon-setting"></i>
                            <p>维修处理</p>
                        </li>
                        <li>
                            <i class="el-icon-position"></i>
                            <p>广告推送</p>
                        </li>
                        <li>
                            <i class="el-icon-document-copy"></i>
                            <p>社区推送</p>
                        </li>
                        <li>
                            <i class="el-icon-location-information"></i>
                            <p>智慧巡更</p>
                        </li>
                        <li>
                            <i class="el-icon-bell"> </i>
                            <p>智能预警</p>
                        </li>
                    </ul>
                </div>
                <div class="notes">
                    <div class="notes-left">
                        <div class="backlog-title">
                            <div class="backlog-left">
                                <p>待办项目</p>
                            </div>
                            <div class="notes-more">
                                更多
                            </div>
                        </div>
                        <ul>
                            <li>
                                <p class="notes-title">停水通知</p>
                                <p class="notes-date">2021-09-12 12：34</p>
                            </li>
                            <li>
                                <p class="notes-title">维修公告</p>
                                <p class="notes-date">2021-09-12 12：34</p>
                            </li>
                            <li>
                                <p class="notes-title">消毒提示XXXXXX…</p>
                                <p class="notes-date">2021-09-12 12：34</p>
                            </li>
                        </ul>
                    </div>
                    <div class="notes-right">
                        <el-carousel :interval="5000" arrow="always">
                            <el-carousel-item>
                                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u2205.png"
                                    alt="">
                            </el-carousel-item>
                            <el-carousel-item>
                                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u2206.png"
                                    alt="">
                            </el-carousel-item>
                            <el-carousel-item>
                                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u2207.png"
                                    alt="">
                            </el-carousel-item>
                            <el-carousel-item>
                                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u2202.png"
                                    alt="">
                            </el-carousel-item>
                        </el-carousel>
                        <div class="notes-mask">
                            更多
                        </div>
                    </div>
                </div>
            </div>
            <div class="intro-right">
                <div class="emergency">
                    <div class="backlog-title">
                        <div class="backlog-left">
                            <p>待办项目</p>
                        </div>
                    </div>
                    <ul>
                        <li>
                            <div></div>
                            <p>出入告警</p>
                        </li>
                        <li>
                            <div></div>
                            <p>陌生人告警</p>
                        </li>
                        <li>
                            <div></div>
                            <p>高空抛物</p>
                        </li>
                        <li>
                            <div></div>
                            <p>车辆预警</p>
                        </li>
                        <li>
                            <div></div>
                            <p>周界入侵</p>
                        </li>
                        <li>
                            <div></div>
                            <p>电瓶车入梯</p>
                        </li>
                        <li>
                            <div></div>
                            <p>消防通道占用</p>
                        </li>
                        <li>
                            <div></div>
                            <p>烟感报警</p>
                        </li>
                    </ul>
                </div>
                <div class="incident">
                    <div class="backlog-title">
                        <div class="backlog-left">
                            <p>事件</p>
                        </div>
                    </div>
                    <div class="suggest">
                        <div class="incident-title">
                            <div class="incident-left">
                                <p class="left-title">投诉建议</p>
                                <p class="incident-more">更多</p>
                            </div>
                            <div class="incident-right">
                                <div class="replay-flag"></div>
                                <p class="replay">待回复</p>
                            </div>
                        </div>
                        <ul>
                            <li>
                                <div class="incident-txt">
                                    <div class="replay-flag"></div>
                                    <p>电梯摇晃的，太危险了…</p>
                                </div>
                                <p class="date">2021-09-12 12：34</p>

                            </li>
                            <li>
                                <div class="incident-txt">
                                    <div class="replay-flag"></div>
                                    <p>电梯摇晃的，太危险了…</p>
                                </div>
                                <p class="date">2021-09-12 12：34</p>
                            </li>
                            <li>
                                <div class="incident-txt">
                                    <div class="replay-flag"></div>
                                    <p>电梯摇晃的，太危险了…</p>
                                </div>
                                <p class="date">2021-09-12 12：34</p>
                            </li>
                        </ul>
                    </div>
                    <div class="suggest">
                        <div class="incident-title">
                            <div class="incident-left">
                                <p class="left-title">维修处理</p>
                                <p class="incident-more">更多</p>
                            </div>
                            <div class="incident-right">
                                <div class="replay-flag"></div>
                                <p class="replay">待派单</p>
                                <div class="order-flag order"></div>
                                <p class="replay">待接单</p>
                            </div>
                        </div>
                        <ul>
                            <li>
                                <div class="incident-txt">
                                    <div class="replay-flag"></div>
                                    <p>电梯摇晃的，太危险了…</p>
                                </div>
                                <p class="date">2021-09-12 12：34</p>

                            </li>
                            <li>
                                <div class="incident-txt">
                                    <div class="order-flag"></div>
                                    <p>电梯摇晃的，太危险了…</p>
                                </div>
                                <p class="date">2021-09-12 12：34</p>
                            </li>
                            <li>
                                <div class="incident-txt">
                                    <div class="replay-flag"></div>
                                    <p>电梯摇晃的，太危险了…</p>
                                </div>
                                <p class="date">2021-09-12 12：34</p>
                            </li>
                        </ul>
                    </div>
                    <div class="suggest">
                        <div class="incident-title">
                            <div class="incident-left">
                                <p class="left-title">事件上报</p>
                                <p class="incident-more">更多</p>
                            </div>
                            <div class="incident-right">
                                <div class="replay-flag"></div>
                                <p class="replay">待处理</p>
                            </div>
                        </div>
                        <ul>
                            <li>
                                <div class="incident-txt">
                                    <div class="replay-flag"></div>
                                    <p>电梯摇晃的，太危险了…</p>
                                </div>
                                <p class="date">2021-09-12 12：34</p>

                            </li>
                            <li>
                                <div class="incident-txt">
                                    <div class="replay-flag"></div>
                                    <p>电梯摇晃的，太危险了…</p>
                                </div>
                                <p class="date">2021-09-12 12：34</p>
                            </li>
                            <li>
                                <div class="incident-txt">
                                    <div class="replay-flag"></div>
                                    <p>电梯摇晃的，太危险了…</p>
                                </div>
                                <p class="date">2021-09-12 12：34</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { mapActions, mapState,mapMutations } from 'vuex';
import store from '@/store';
import * as echarts from 'echarts';
export default {
    data() {
        return {
            activeName: 'first',
            account:''
        };
    },
    methods: {
        ...mapActions(['getList','getBuild'])
    },
    mounted() {
        var chartDom = this.$refs.check
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['50%', '90%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    data: [
                        {
                            value: 9,
                            itemStyle:
                                { color: '#5ca7ff' },
                            name: '未入住',
                            emphasis: {
                                disabled: true
                            }
                        },
                        {
                            value: 254,
                            itemStyle:
                                { color: '#4bd863' },
                            name: '已入住',
                            emphasis: {
                                disabled: true
                            }

                        },

                    ]
                }
            ]
        };

        option && myChart.setOption(option);
        var chartDom = this.$refs.houses
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['50%', '90%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    data: [
                        {
                            value: 34,
                            itemStyle:
                                { color: '#5ca7ff' },
                            name: '租用',
                            emphasis: {
                                disabled: true
                            }
                        },
                        {
                            value: 200,
                            itemStyle:
                                { color: '#4bd863' },
                            name: '自用',
                            emphasis: {
                                disabled: true
                            }

                        },
                        {
                            value: 20,
                            itemStyle:
                                { color: '#ff9900' },
                            name: '闲置',
                            emphasis: {
                                disabled: true
                            }
                        },

                    ]
                }
            ]
        };

        option && myChart.setOption(option);
        this.getList()
        this.getBuild()
        //请求所有数据
    //     fetch('http://127.0.0.1/user/all').then(res => res.json()).then(res1 => {
    //     console.log(res1);

    //     this.changeAllData(res1)
    //   }).catch(err => {
    //     console.log(err);
    //   })
     this.account=localStorage.getItem('name')
        
    },
    //查询楼栋数量
    computed: {
        ...mapState([
           "buildCount",
           "roomCount",
           "householdCount",
           "moveInCount",
           "moveCount",
           "rentCount",
           "selfCount",
           "idleCount",
        ])
    }
};
</script>

<style scoped>
.order {
    margin-left: 10px;
}

.order-flag {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 153, 0, 1);
    border-radius: 15px;
    margin-right: 10px;
}

.incident-title {
    margin-bottom: 15px;
}

.replay-flag {
    margin-right: 10px;
}

.incident li {
    height: 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E4E7ED;
    justify-content: space-between;
}

.date {
    font-size: 12px;
    color: #A1A1A1;
}

.incident-txt {
    display: flex;
    align-items: center;

}

.incident-txt p {
    font-size: 12px;
    color: #000;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggest {
    padding: 10px 35px;
}

.incident-title {
    justify-content: space-between;
}

.incident-left,
.incident-right,
.incident-title {
    display: flex;
    align-items: center;
}

.replay {
    font-size: 12px;
    color: #000;
}

.replay-flag {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 51, 0, 1);
    border-radius: 15px;
}

.left-title {
    font-size: 14px;
    color: #666;
}

.incident-more {
    font-size: 12px;
    color: #169BD5;
    margin-left: 10px;
}

.emergency ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 60px;
}

.emergency li {
    margin-top: 20px;
    min-width: 25%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    /* justify-content: space-between; */
}

.emergency ul p {
    font-size: 12px;
    color: #666;

}

.emergency ul div {
    height: 30px;
    width: 30px;
    background-color: rgba(242, 242, 242, 1);
    border-radius: 15px;
    margin-right: 15px;
}

.incident {
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
    padding-bottom: 80px;
}

.emergency {
    background: #fff;
    border-radius: 4px;
    height: 175px;
}

.notes-mask {
    color: #169BD5;
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.898039215686275);
    padding: 0 5px;
}

.notes-right>>>.el-carousel__container {
    height: 160px;
}

.notes-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notes-right {
    width: 50%;
    position: relative;
}

.notes ul {
    padding: 10px 35px;
}

.notes li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    border-bottom: 1px solid #E4E7ED;
}

.notes-date {
    font-size: 12px;
    color: #A1A1A1;
}

.notes-title {
    font-size: 12px;
    color: #000;
    max-width: 105px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes {
    margin-top: 10px;
    display: flex;
    height: 160px;
}

.notes-left {
    width: 50%;
    background: #fff;
    border-radius: 4px;
    margin-right: 10px;
}

.notes-more {
    color: #169BD5;
    font-size: 12px;
}

.navs li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 25%;
}

.navs ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 50px;
    height: 200px;
}

.el-icon-bell {
    color: #6385dd;
}

.el-icon-document-copy {
    color: #2db7f5;
}

.el-icon-position {
    color: #4bd863;
}

.el-icon-setting {
    color: #2b49ad;
}

.el-icon-bank-card {
    color: #f95e5a;
}

.el-icon-user {
    color: #fe9400;
}

.el-icon-office-building,
.el-icon-location-information {
    color: rgba(51, 153, 255, 1);
}

.navs li p {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

.navs i {
    font-size: 42px;
}

.swiper>>>.el-carousel__arrow--left {
    left: 0;
}

.swiper>>>.el-carousel__arrow--right {
    right: 0;
}

.swiper>>>.el-carousel__arrow {
    width: 14px;
    height: 94px;
    border-radius: 0;
    background-color: #fff;
    color: blue;
    font-weight: bold;

}

.swiper>>>.el-carousel__arrow:hover {
    background: #0099ff38;
}

.swiper.el-carousel__indicators {
    display: none;
}

.swiper,
.swiper .el-carousel__item {
    height: 130px;
}

.swiper>>>.el-carousel__container {
    height: 130px;
}

.swiper-items-second .swiper-item {
    margin-right: 70px;
}

.swiper-num1 span {
    font-size: 12px;
    color: #666;
}

.swiper-num1 {
    color: #F95E5A;
}

.swiper-num2 {
    color: #3399FF;
}

.swiper-num3 {
    color: #FE9400;
}

.swiper-num4 {
    color: #3399FF;
}

.swiper-num1,
.swiper-num2,
.swiper-num3,
.swiper-num4 {
    line-height: 12px;
    font-size: 20px;
}

.swiper-items-second {
    display: flex;
}

.swiper-item {
    min-width: 153px;
    height: 94px;
    background-color: rgba(242, 242, 242, 1);
    border-radius: 3px;
    padding: 0 10px;
}

.swiper-bottom {
    display: flex;
}

.swiper-bottom div {
    width: 60px;
}

.swiper .el-carousel__item {
    display: flex;
    background: #fff;
    align-items: center;

    padding: 0 50px;
}

.swiper-items-first {
    justify-content: space-between;
    display: flex;
    width: 100%;
}

.operation {
    font-size: 12px;
    color: #A1A1A1;
    margin-top: 10px;
}

.swiper-num {
    font-size: 20px;
    color: #3399FF;
    line-height: 12px;
}

.swiper-title {
    font-size: 14px;
    color: #666;
    padding: 6px 2px 2px 0;
    margin-bottom: 20px;
}

.backlog,
.navs {
    background: #fff;
    margin-top: 10px;
    border-radius: 4px
}

.backlog-title {
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    border-bottom: 2px solid #E4E7ED;
}

.backlog-left {
    font-size: 12px;
    color: #666;
}

.intro-right {
    width: 50%;
}

.intro-left {
    width: 60%;
    margin-right: 20px;

}

.intro-left>>>.el-tabs__nav-scroll {
    padding: 0 35px;
}

.intro {
    margin-top: 10px;
    display: flex;
}

.facility {
    cursor: pointer;
}

.more {
    color: rgb(51, 153, 255);
    font-size: 12px;
    position: absolute;
    right: 20px;
    top: 0;
    cursor: pointer;
}

.second-info {
    padding: 0 30px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.third-info img {
    width: 2px;
    height: 29px;
    margin: 0 30px;
}

.third-info {
    padding: 0 30px;
    height: 120px;
    display: flex;
    align-items: center;
}

.second-info img {
    width: 2px;
    height: 29px;
}

.isonline {
    font-size: 12px;
    color: #666;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.isonline p {
    padding: 0 5px;
}

.second-info-num {
    font-size: 18px;
    color: #464C5B;
    font-weight: 650;
    text-align: center;
    margin-top: 10px;
}

.second-info-title {
    font-size: 12px;
    color: #333;
    text-align: center;

}

.first-info img {
    width: 2px;
    height: 29px;
    margin: 0 40px;
}

.check-in,
.house-type {
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.check-shape,
.houses-shape {
    width: 66px;
    height: 66px;
    margin: 0 20px;
}

.first-info {
    height: 120px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    /* justify-content: space-between; */
}

.house-shape {
    display: flex;
    align-items: center;
}

.house-num p,
.check-num p {
    font-size: 12px;
    color: #868686;

}

.house-number {
    font-size: 12px;
    color: #868686;
    /* text-align: right; */
    margin-bottom: 5px;
}

.number {
    color: #464C5B;
    font-size: 18px;
    text-align: center;
}

.el-tabs--top {
    width: 100%;
    background: #fff;
    position: relative;
}

.mask-data {
    font-size: 12px;
    letter-spacing: normal;
    color: #666666;
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 10;
}

.username {
    margin-left: 20px;
}

.content {
    width: 100%;
    height: 100vh;
    background-color: rgba(240, 243, 248, 1);
    padding: 10px 30px 0;
}

.avatar img {
    width: 42px;
    height: 42px;
}

.user {
    font-size: 14px;
    color: #666;
}

.region {
    font-size: 12px;
    color: #666;
    text-decoration: underline;
    margin-top: 10px;
    cursor: pointer;
}

.userInfo-right img {
    width: 2px;
    height: 29px;

}

.userinfo-num {
    font-size: 12px;
    color: #868686;
    min-width: 80px;
    text-align: right;
    margin: 0 20px;
}

.num {
    font-size: 20px;
    margin-top: 10px;

}

.num1 {
    color: #3399FF;
}

.num2 {
    color: #FF9900;
}

.num3 {
    color: #FF9900;
}

.userInfo-left {
    display: flex;
}

.userInfo-right,
.user {
    display: flex;
    align-items: center;
}

.userInfo {
    padding: 0 30px;
    display: flex;
    align-items: center;
    background: #fff;
    height: 83px;
    justify-content: space-between;
}

.avatar {
    margin-right: 15px;
}
</style>